<template>
    <div class="app-container">
      <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked"  @Launchform="Launchform3"/>

    <!-- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="部门名称" prop="deptName">
        <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable style="width: 200px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="部门状态" clearable style="width: 200px">
          <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
      </el-col>
      <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
    </el-row>

    <el-table  
      v-if="refreshTable"  
      v-loading="loading"  
      :data="getPositionDataTableDate"  
      row-key="typeId"  
      :default-expand-all="isExpandAll"  
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"  
    >  
      <el-table-column   
        prop="seqNo"   
        label="序号"   
        width="260"   
        :class-name="getTypeNameClass"  
      ></el-table-column>  

      <el-table-column   
        prop="partName"   
        label="部位名称"   
        width="260"   
        :class-name="getTypeNameClass"  
      ></el-table-column>  

      <el-table-column   
        prop="engPartName"   
        label="部位名称(英)"   
        width="260"   
        :class-name="getTypeNameClass"  
      ></el-table-column>  

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">                                                  
        <template #default="scope">  
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">修改</el-button>  
          <el-button link type="primary" icon="Plus" @click="handleAdd1(scope.row)" v-hasPermi="['system:dept: add']">新增</el-button>  
          <el-button  
            v-if="scope.row.parentId != 0"  
            link  
            type="primary"  
            icon="Delete"  
            @click="handleCloseMateriaLKlc9(scope.row)"  
            v-hasPermi="['system:dept:remove']"  
            >删除</el-button  
          >  
        </template>  
      </el-table-column>  
    </el-table>  

    <!-- 添加或修改部门对话框 -->
    <el-dialog :close-on-click-modal="false" title="修改数据" v-model="open" width="600px" append-to-body>
      <el-form ref="postRef" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="序号">
        <el-input v-model="editPositionDataParms.seqNo" placeholder="请输入序号" />
      </el-form-item>
      <el-form-item label="部位名称(中)">
        <el-input v-model="editPositionDataParms.partName" placeholder="请输入部位名称(中)" />
      </el-form-item>
      <el-form-item label="部位名称(英)">
        <el-input v-model="editPositionDataParms.engPartName" placeholder="请输入部位名称(英)" />
      </el-form-item>
      

    </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm1">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>


        <!-- 添加或修改部门对话框 -->
    <el-dialog :close-on-click-modal="false" title="添加数据" v-model="open1" width="600px" append-to-body>
      <el-form ref="postRef" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="序号">
        <el-input v-model="addPositionDataParms.seqNo" placeholder="请输入序号" />
      </el-form-item>
      <el-form-item label="部位名称(中)">
        <el-input v-model="addPositionDataParms.partName" placeholder="请输入部位名称(中)" />
      </el-form-item>
      <el-form-item label="部位名称(英)">
        <el-input v-model="addPositionDataParms.engPartName" placeholder="请输入部位名称(英)" />
      </el-form-item>
     
    </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm2">确 定</el-button>
          <el-button @click="open1 = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
  import { defineComponent,onMounted,ref,nextTick, toRefs, reactive } from 'vue';
  export default defineComponent({
    name:'PositionDataFile'
  })
</script>
<script lang="ts" setup>
import {getPositionData,addPositionData,delPositionData,editPositionData} from '@/api/ControlDepartment/MaterialManagement/PositionDataFile'
import {cloneDeep} from 'lodash'
import { ElMessage, ElMessageBox } from 'element-plus';
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入序号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入部位名称(中)',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入部位名称(英)',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '搜索',
    bgColor: '#67C23A'
  },
])

const findClicked = (row:string) => {
  if(row === '置空'){
    formList.value[0].inputValue = ''
    formList.value[1].inputValue = ''
    formList.value[2].inputValue = '' 
    
  }
  if(row === '搜索'){
    getPositionDataMethods()
   }
}

// 修改
const open = ref(false)

const submitForm1 = () => {
  editPositionDataMethods()
}

const editPositionDataParms = ref()

const editPositionDataMethods = async () => {
  try {
    const result = await editPositionData(editPositionDataParms.value) 
    if (result.code === 200) {
      ElMessage.success(result.msg)
      open.value = false
      getPositionDataMethods() 
    }else{
      ElMessage.error(result.msg)
    }
  } catch (error) {
    ElMessage.error('修改失败')
  }
}

const handleUpdate = (row:any) => {
  open.value = true
  editPositionDataParms.value =cloneDeep(row) 
}

// 删除

const handleCloseMateriaLKlc9 = (row:any) => {
  ElMessageBox.confirm('确认要删除吗?')
    .then(async () => {
      delPositionDataMethods(row)
    })
    .catch(() => {})
}

const delPositionDataMethods = async (row:any) => {
  try {
    const result = await delPositionData(row.partId)
    if (result.code === 200) {
      ElMessage.success(result.msg)
      getPositionDataMethods() 
    } else{
      ElMessage.error(result.msg)
    }
  } catch{
    ElMessage.error('删除失败')
  }
}

const open1 = ref(false)
const handleAdd1 = (row:any) => {
  console.log(row)
  addPositionDataParms.value.partId  = row.partId

  open1.value = true
}

const submitForm2 = () => {
  addPositionDataMethods()
}

const data = reactive({
  form: {},
  queryParams: {
    deptName: undefined,
    status: undefined
  },
  rules: {
    parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
    deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
    orderNum: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
    leader: [{ required: true, message: '负责人不能为空', trigger: 'blur' }]
  }
})

const { queryParams, form, rules } = toRefs(data)

const addPositionDataParms = ref({
  ancestors: "",
  engPartName: "",
  orderNum: 0,
  parentId: 0,
  partId: 0,
  partName: "",
  remark: "",
  seqNo: ""
})

// 新增
const addPositionDataMethods = async () => {
  
  try {
    const result = await addPositionData(addPositionDataParms.value)
    if (result.code === 200) {
      ElMessage.success(result.msg)
      open1.value = false
      addPositionDataParms.value.partName = ""
      addPositionDataParms.value.engPartName = ""
      addPositionDataParms.value.seqNo = ""
      addPositionDataParms.value.remark = ""
      getPositionDataMethods() 
    }else{
      ElMessage.error('新增失败')
    }
  } catch (error) {
    ElMessage.error('新增失败')
  }
}

const isExpandAll = ref(true)
const loading = ref(false)
// 获取数据
const getPositionDataTableDate = ref([])
const Launchform3 = (row:any) => {
  Launchform3Parms.value.seqNo = row[0].inputValue
  Launchform3Parms.value.partName = row[1].inputValue
  Launchform3Parms.value.engPartName = row[2].inputValue

}
const Launchform3Parms = ref({
  seqNo:'',
  partName:'',
  engPartName:'',
  remark:''
})
const getPositionDataMethods = async () => {
  loading.value = true
  const res = await getPositionData(Launchform3Parms.value)
  getPositionDataTableDate.value = res.data
  console.log(res)
  loading.value = false
}

onMounted(() => {
  getPositionDataMethods()
})
const refreshTable = ref(true)
/** 展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false
  isExpandAll.value = !isExpandAll.value
  nextTick(() => {
    refreshTable.value = true
  })
}
</script>

<style lang="less" scoped>
</style>
